<template>
  <!-- 温度 -->
  <div>
    <div class="linearLinewinter" v-if="factorIndex == 0"></div>
    <div class="linearLineright" style="bottom: 160px">
      <div
        v-for="(item, index) in wintertemperature"
        v-if="colornum == '冬季'"
        :key="index"
      >
        <div class="wenduright" v-if="factorIndex == 0">
          <div>{{ item.interval }}</div>
        </div>
      </div>
      <!-- <div
        v-for="(item, index) in springtemperature"
        v-if="colornum == '春季'"
        :key="index"
      >
        <div class="wenduright" v-if="factorIndex == 0">
          <div>{{ item.interval }}</div>
        </div>
      </div> -->
      <div
        v-for="(item, index) in wintertemperature"
        v-if="colornum == '春季'"
        :key="index"
      >
        <div class="wenduright" v-if="factorIndex == 0">
          <div>{{ item.interval }}</div>
        </div>
      </div>
      <div
        v-for="(item, index) in temperaturetemperature"
        v-if="colornum == '夏季'"
        :key="index"
      >
        <div class="wenduright" v-if="factorIndex == 0">
          <div>{{ item.interval }}</div>
        </div>
      </div>
      <div
        v-for="(item, index) in autumntemperature"
        v-if="colornum == '秋季'"
        :key="index"
      >
        <div class="wenduright" v-if="factorIndex == 0">
          <div>{{ item.interval }}</div>
        </div>
      </div>
    </div>
    <!-- 降水 -->
    <div class="linearLinejs" v-if="factorIndex == 3 || factorIndex == 4"></div>
    <div class="linearLinejscomm">
      <div v-for="(item, index) in precipitation" :key="index">
        <div class="wenduright" v-if="factorIndex == 3 || factorIndex == 4">
          <div>{{ item.interval }}</div>
        </div>
      </div>
    </div>
    <!-- 湿度 -->
    <div class="linearLinesd" v-if="factorIndex == 1"></div>
    <div class="linearLinesdcomm">
      <div v-for="(item, index) in humidity" :key="index">
        <div class="wenduright" v-if="factorIndex == 1">
          <div>{{ item.interval }}</div>
        </div>
      </div>
    </div>

    <!-- 风力 -->
    <div class="linearLinefl" v-if="factorIndex == 2"></div>
    <div class="linearLineflcomm">
      <div v-for="(item, index) in windpower" :key="index">
        <div class="wenduright" v-if="factorIndex == 2">
          <div>{{ item.interval }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //冬季温度（12-2）
      wintertemperature: [
        {
          color: "#efab49",
          interval: ">16",
        },
        {
          color: "#face60",
          interval: "16",
        },
        {
          color: "#f7fb67",
          interval: "14",
        },
        {
          color: "#e8fe9a",
          interval: "12",
        },
        {
          color: "#c1f68d",
          interval: "10",
        },
        {
          color: "#85f594",
          interval: "8",
        },
        {
          color: "#32f2a3",
          interval: "6",
        },
        {
          color: "#71feda",
          interval: "4",
        },
        {
          color: "#aae8fe",
          interval: "2",
        },
        {
          color: "#a9d0ff",
          interval: "0",
        },
        {
          color: "#89aeeb",
          interval: "-2",
        },
        {
          color: "#6a8dd8",
          interval: "-4",
        },
        {
          color: "#4b6cc5",
          interval: "-6",
        },
        {
          color: "#2b4bb2",
          interval: "-8",
        },
        {
          color: "#24378a",
          interval: "<-10",
        },
      ],
      //春季(3月-5月)
      springtemperature: [
        {
          color: "#dc2d1b",
          interval: ">36",
        },
        {
          color: "#e25e2b",
          interval: "36",
        },
        {
          color: "#e48c3e",
          interval: "33",
        },
        {
          color: "#efab49",
          interval: "30",
        },
        {
          color: "#face60",
          interval: "27",
        },
        {
          color: "#f7fb67",
          interval: "24",
        },
        {
          color: "#e8fe9a",
          interval: "21",
        },
        {
          color: "#c1f68d",
          interval: "18",
        },
        {
          color: "#85f594",
          interval: "15",
        },
        {
          color: "#32f2a3",
          interval: "12",
        },
        {
          color: "#71feda",
          interval: "9",
        },
        {
          color: "#aae8fe",
          interval: "6",
        },
        {
          color: "#a9d0ff",
          interval: "3",
        },
        {
          color: "#89aeeb",
          interval: "<0",
        },
      ],
      //夏季(6月-8月)
      temperaturetemperature: [
        {
          color: "#880707",
          interval: ">40",
        },
        {
          color: "#af0e0e",
          interval: "40",
        },
        {
          color: "#c51e1e",
          interval: "38",
        },
        {
          color: "#cd501f",
          interval: "36",
        },
        {
          color: "#e25e2b",
          interval: "34",
        },
        {
          color: "#e48c3e",
          interval: "32",
        },
        {
          color: "#efab49",
          interval: "30",
        },
        {
          color: "#face60",
          interval: "28",
        },
        {
          color: "#f7fb67",
          interval: "26",
        },
        {
          color: "#e8fe9a",
          interval: "24",
        },
        {
          color: "#c1f68d",
          interval: "22",
        },
        {
          color: "#85f594",
          interval: "20",
        },
        {
          color: "#32f2a3",
          interval: "18",
        },
        {
          color: "#71feda",
          interval: "<16",
        },
      ],
      //秋季(9月-11月)
      autumntemperature: [
        {
          color: "#dc2d1b",
          interval: ">36",
        },
        {
          color: "#e25e2b",
          interval: "36",
        },
        {
          color: "#e48c3e",
          interval: "33",
        },
        {
          color: "#efab49",
          interval: "30",
        },
        {
          color: "#face60",
          interval: "27",
        },
        {
          color: "#f7fb67",
          interval: "24",
        },
        {
          color: "#e8fe9a",
          interval: "21",
        },
        {
          color: "#c1f68d",
          interval: "18",
        },
        {
          color: "#85f594",
          interval: "15",
        },
        {
          color: "#32f2a3",
          interval: "12",
        },
        {
          color: "#71feda",
          interval: "9",
        },
        {
          color: "#aae8fe",
          interval: "6",
        },
        {
          color: "#a9d0ff",
          interval: "3",
        },
        {
          color: "#89aeeb",
          interval: "<0",
        },
      ],
      //降水
      precipitation: [
        {
          color: "#810000",
          interval: ">250",
        },
        {
          color: "#f305ee",
          interval: "250",
        },
        {
          color: "#0000f9",
          interval: "100",
        },
        {
          color: "#63b8f9",
          interval: "50",
        },
        {
          color: "#3db900",
          interval: "25",
        },
        {
          color: "#a5f38d",
          interval: "<10",
        },
      ],
      //湿度
      humidity: [
        {
          color: "#000f50",
          interval: "100",
        },
        {
          color: "#071e78",
          interval: "90",
        },
        {
          color: "#112c90",
          interval: "80",
        },
        {
          color: "#1c3ba8",
          interval: "70",
        },
        {
          color: "#2b5cdb",
          interval: "60",
        },
        {
          color: "#3b7edb",
          interval: "50",
        },
        {
          color: "#6b9de1",
          interval: "40",
        },
        {
          color: "#9bbce8",
          interval: "30",
        },
        {
          color: "#99d2ca",
          interval: "20",
        },
        {
          color: "#97e8ad",
          interval: "10",
        },
      ],
      //风力
      windpower: [
        {
          color: "#9ee0a1",
          interval: "<6",
        },
        {
          color: "#97e8ad",
          interval: "6",
        },
        {
          color: "#99d2ca",
          interval: "7",
        },
        {
          color: "#9bbce8",
          interval: "8",
        },
        {
          color: "#6b9de1",
          interval: "9",
        },
        {
          color: "#3becdb",
          interval: "10",
        },
        {
          color: "#2b5cc2",
          interval: "11",
        },
        {
          color: "#1c3ba9",
          interval: "12",
        },
        {
          color: "#112c90",
          interval: "13",
        },
        {
          color: "#071e78",
          interval: "14",
        },
        {
          color: "#461981",
          interval: "15",
        },
        {
          color: "#86158a",
          interval: "16",
        },
        {
          color: "#c811a9",
          interval: ">17",
        },
      ],
      colornum: "",
    };
  },
  props: {
    factorIndex: Number,
  },

  components: {},

  computed: {},

  mounted() {
    var day = new Date();
    var month = day.getMonth() + 1;

    if (month === 1 || month === 2 || month === 12) {
      this.colornum = "冬季";
    } else if (month >= 3 && month <= 5) {
      this.colornum = "春季";
    } else if (month >= 6 && month <= 8) {
      this.colornum = "夏季";
    } else if (month >= 9 && month <= 11) {
      this.colornum = "秋季";
    }
  },

  methods: {},
};
</script>
<style lang="less" scoped>
//冬季
.linearLinewinter {
  position: absolute;
  left: 22px;
  bottom: 160px;
  width: 20px;
  z-index: 99;
  border-radius: 30px;
  overflow: hidden;
  height: 210px;

  background: linear-gradient(
    to bottom,
    #efab49,
    #face60,
    #f7fb67,
    #e8fe9a,
    #c1f68d,
    #85f594,
    #32f2a3,
    #71feda,
    #aae8fe,
    #a9d0ff,
    #89aeeb,
    #6a8dd8,
    #4b6cc5,
    #2b4bb2,
    #24378a
  );

  //   .wendu {
  //     display: flex;
  //     width: 100%;
  //     height: 15px;

  //     background-color: #034da1;
  //   }
  .linearLineBlock {
    width: 100%;
    height: 12px;
    border-bottom: 1px solid white;
  }
}
//春季
.linearLinespring {
  position: absolute;
  left: 22px;
  bottom: 160px;
  width: 20px;
  z-index: 99;
  border-radius: 30px;
  overflow: hidden;
  height: 210px;

  background: linear-gradient(
    to bottom,
    #dc2d1b,
    #e25e2b,
    #e48c3e,
    #efab49,
    #face60,
    #f7fb67,
    #e8fe9a,
    #c1f68d,
    #85f594,
    #32f2a3,
    #71feda,
    #aae8fe,
    #a9d0ff,
    #89aeeb
  );

  .linearLineBlock {
    width: 100%;
    height: 12px;
    border-bottom: 1px solid white;
  }
}
//夏季
.linearLinesummer {
  position: absolute;
  left: 22px;
  bottom: 160px;
  width: 20px;
  z-index: 99;
  border-radius: 30px;
  overflow: hidden;
  height: 210px;

  background: linear-gradient(
    to bottom,
    #880707,
    #af0e0e,
    #c51e1e,
    #cd501f,
    #e25e2b,
    #e48c3e,
    #efab49,
    #face60,
    #f7fb67,
    #e8fe9a,
    #c1f68d,
    #85f594,
    #32f2a3,
    #71feda
  );

  .linearLineBlock {
    width: 100%;
    height: 12px;
    border-bottom: 1px solid white;
  }
}
//秋季
.linearLineautumn {
  position: absolute;
  left: 22px;
  bottom: 160px;
  width: 20px;
  z-index: 99;
  border-radius: 30px;
  overflow: hidden;
  height: 210px;

  background: linear-gradient(
    to bottom,
    #dc2d1b,
    #e25e2b,
    #e48c3e,
    #efab49,
    #face60,
    #f7fb67,
    #e8fe9a,
    #c1f68d,
    #85f594,
    #32f2a3,
    #71feda,
    #aae8fe,
    #a9d0ff,
    #89aeeb
  );

  .linearLineBlock {
    width: 100%;
    height: 12px;
    border-bottom: 1px solid white;
  }
}
//降水
.linearLinejs {
  position: absolute;
  left: 22px;
  bottom: 160px;
  width: 20px;
  border-radius: 30px;
  overflow: hidden;
  height: 88px;
  background: linear-gradient(
    to bottom,
    rgba(129, 0, 0),
    rgba(243, 5, 238),
    rgba(0, 0, 249),
    rgba(99, 184, 249),
    rgba(61, 185, 0),
    rgba(165, 243, 141)
  );
}
//风力
.linearLinefl {
  position: absolute;
  left: 22px;
  bottom: 160px;
  width: 20px;
  border-radius: 30px;
  overflow: hidden;
  height: 195px;
  background: linear-gradient(
    to bottom,
    rgba(158, 224, 161),
    rgba(151, 232, 173),
    rgba(153, 210, 202),
    rgba(155, 188, 232),
    rgba(107, 157, 225),
    rgba(59, 236, 219),
    rgba(43, 92, 194),
    rgba(28, 59, 169),
    rgba(17, 44, 144),
    rgba(7, 30, 120),
    rgba(70, 25, 129),
    rgba(134, 21, 138),
    rgba(200, 17, 169)
  );
}
//湿度
.linearLinesd {
  position: absolute;
  left: 22px;
  bottom: 160px;
  width: 20px;
  border-radius: 30px;
  overflow: hidden;
  height: 150px;
  background: linear-gradient(
    to bottom,
    rgba(0, 15, 80),
    rgba(7, 30, 120),
    rgba(17, 44, 144),
    rgba(28, 59, 169),
    rgba(43, 92, 194),
    rgba(59, 126, 219),
    rgba(107, 157, 225),
    rgba(155, 188, 232),
    rgba(153, 210, 202),
    rgba(151, 232, 173)
  );
}
.linearLineright {
  position: absolute;
  height: 210px;
  left: 45px;
  bottom: 160px;
  z-index: 99;
  display: grid;
  .wenduright {
    display: flex;
    transform: scale(0.9);

    // height: 15px;
    font-size: 12px;
    grid-row: auto; /* 让子元素平均分配父元素的高度 */
  }
}
.linearLinerightcommon {
  bottom: 100px;

  .wenduright {
    display: flex;
    transform: scale(0.9);
    height: 14.5px;
    font-size: 12px;
  }
}
.linearLinesdcomm {
  position: absolute;
  height: 150px;
  left: 45px;
  bottom: 160px;
  z-index: 99;
  display: grid;
  .wenduright {
    display: flex;
    transform: scale(0.9);

    // height: 15px;
    font-size: 12px;
    grid-row: auto; /* 让子元素平均分配父元素的高度 */
  }
}
.linearLineflcomm {
  position: absolute;
  height: 88px;
  left: 45px;
  bottom: 160px;
  height: 195px;
  z-index: 99;
  display: grid;
  .wenduright {
    display: flex;
    transform: scale(0.9);

    // height: 15px;
    font-size: 12px;
    grid-row: auto; /* 让子元素平均分配父元素的高度 */
  }
}
.linearLinejscomm {
  position: absolute;
  height: 88px;
  left: 45px;
  bottom: 160px;
  height: 88px;
  z-index: 99;
  display: grid;
  .wenduright {
    display: flex;
    transform: scale(0.9);

    // height: 15px;
    font-size: 12px;
    grid-row: auto; /* 让子元素平均分配父元素的高度 */
  }
}
</style>
